import 'package:flutter/material.dart';
import '../../layouts/main_layout.dart';
import '../../theme/theme.dart';

/// 首页示例1
class HomePage6 extends StatelessWidget {
  const HomePage6({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return _buildContent(context);
  }
  
  // 构建内容区域
  Widget _buildContent(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildHeader(context),
            const SizedBox(height: 24),
            _buildCards(),
            const SizedBox(height: 24),
            _buildStatisticCards(),
            const SizedBox(height: 24),
            _buildInfoSection(),
          ],
        ),
      ),
    );
  }
  
  // 构建页面标题
  Widget _buildHeader(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        LayoutBuilder(
          builder: (context, constraints) {
            if (constraints.maxWidth < 600) {
              // 小屏幕时使用垂直布局
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    '后台管理系统 - 首页1',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              );
            } else {
              // 大屏幕时使用水平布局
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(
                    '首页示例6',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ), 
                ],
              );
            }
          },
        ),
        const SizedBox(height: 8),
        Text(
          '欢迎使用 Miaoyi 后台管理系统',
          style: TextStyle(
            fontSize: 14,
            color: Colors.grey[600],
          ),
        ),
      ],
    );
  }
  
  // 构建卡片区域
  Widget _buildCards() {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 根据屏幕宽度决定布局方式
        if (constraints.maxWidth < 800) {
          // 小屏幕时使用垂直布局
          return Column(
            children: [
              _buildInfoCard(
                title: '访问量',
                value: '3,650',
                icon: Icons.visibility,
                color: const Color(0xFF1AB394),
                description: '日同比增长12%',
              ),
              const SizedBox(height: 16),
              _buildInfoCard(
                title: '销售额',
                value: '￥235,600',
                icon: Icons.attach_money,
                color: const Color(0xFF1C84C6),
                description: '周同比增长15%',
              ),
              const SizedBox(height: 16),
              _buildInfoCard(
                title: '新增用户',
                value: '368',
                icon: Icons.person_add,
                color: const Color(0xFFF8AC59),
                description: '月同比增长8%',
              ),
              const SizedBox(height: 16),
              _buildInfoCard(
                title: '订单量',
                value: '2,562',
                icon: Icons.shopping_cart,
                color: const Color(0xFFED5565),
                description: '日同比增长11%',
              ),
            ],
          );
        } else {
          // 大屏幕时使用水平布局
          return Row(
            children: [
              Expanded(
                child: _buildInfoCard(
                  title: '访问量',
                  value: '3,650',
                  icon: Icons.visibility,
                  color: const Color(0xFF1AB394),
                  description: '日同比增长12%',
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: _buildInfoCard(
                  title: '销售额',
                  value: '￥235,600',
                  icon: Icons.attach_money,
                  color: const Color(0xFF1C84C6),
                  description: '周同比增长15%',
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: _buildInfoCard(
                  title: '新增用户',
                  value: '368',
                  icon: Icons.person_add,
                  color: const Color(0xFFF8AC59),
                  description: '月同比增长8%',
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: _buildInfoCard(
                  title: '订单量',
                  value: '2,562',
                  icon: Icons.shopping_cart,
                  color: const Color(0xFFED5565),
                  description: '日同比增长11%',
                ),
              ),
            ],
          );
        }
      },
    );
  }
  
  // 构建数据卡片
  Widget _buildInfoCard({
    required String title,
    required String value,
    required IconData icon,
    required Color color,
    required String description,
  }) {
    return Container(
      height: 120,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(4),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                ),
              ),
              Icon(icon, color: color),
            ],
          ),
          const Spacer(),
          Text(
            value,
            style: const TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 4),
          Text(
            description,
            style: TextStyle(
              fontSize: 12,
              color: Colors.grey[600],
            ),
          ),
        ],
      ),
    );
  }
  
  // 构建统计卡片
  Widget _buildStatisticCards() {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 根据屏幕宽度决定布局方式
        if (constraints.maxWidth < 800) {
          // 小屏幕时使用垂直布局
          return Column(
            children: [
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.05),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '销售统计',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 16),
                    SizedBox(
                      height: 200,
                      child: Center(
                        child: Text(
                          '这里将显示销售统计图表',
                          style: TextStyle(
                            color: Colors.grey[600],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16),
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.05),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '待办事项',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 16),
                    _buildTodoItem(
                      title: '完成项目计划',
                      status: '进行中',
                      date: '2024-03-15',
                      statusColor: Colors.blue,
                    ),
                    _buildTodoItem(
                      title: '客户会议',
                      status: '待开始',
                      date: '2024-03-18',
                      statusColor: Colors.orange,
                    ),
                    _buildTodoItem(
                      title: '技术评审',
                      status: '已完成',
                      date: '2024-03-10',
                      statusColor: Colors.green,
                    ),
                    _buildTodoItem(
                      title: '需求分析',
                      status: '已完成',
                      date: '2024-03-08',
                      statusColor: Colors.green,
                    ),
                    _buildTodoItem(
                      title: '团队建设活动',
                      status: '待开始',
                      date: '2024-03-25',
                      statusColor: Colors.orange,
                    ),
                  ],
                ),
              ),
            ],
          );
        } else {
          // 大屏幕时使用水平布局
          return Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                flex: 2,
                child: Container(
                  height: 300,
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(4),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.05),
                        blurRadius: 4,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        '销售统计',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 16),
                      Expanded(
                        child: Center(
                          child: Text(
                            '这里将显示销售统计图表',
                            style: TextStyle(
                              color: Colors.grey[600],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Container(
                  height: 300,
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(4),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.05),
                        blurRadius: 4,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        '待办事项',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 16),
                      Expanded(
                        child: ListView(
                          children: [
                            _buildTodoItem(
                              title: '完成项目计划',
                              status: '进行中',
                              date: '2024-03-15',
                              statusColor: Colors.blue,
                            ),
                            _buildTodoItem(
                              title: '客户会议',
                              status: '待开始',
                              date: '2024-03-18',
                              statusColor: Colors.orange,
                            ),
                            _buildTodoItem(
                              title: '技术评审',
                              status: '已完成',
                              date: '2024-03-10',
                              statusColor: Colors.green,
                            ),
                            _buildTodoItem(
                              title: '需求分析',
                              status: '已完成',
                              date: '2024-03-08',
                              statusColor: Colors.green,
                            ),
                            _buildTodoItem(
                              title: '团队建设活动',
                              status: '待开始',
                              date: '2024-03-25',
                              statusColor: Colors.orange,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          );
        }
      },
    );
  }
  
  // 构建待办事项
  Widget _buildTodoItem({
    required String title,
    required String status,
    required String date,
    required Color statusColor,
  }) {
    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth < 300) {
            // 非常窄的屏幕使用垂直布局
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                      decoration: BoxDecoration(
                        color: statusColor.withOpacity(0.1),
                        borderRadius: BorderRadius.circular(4),
                      ),
                      child: Text(
                        status,
                        style: TextStyle(
                          fontSize: 12,
                          color: statusColor,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                    const SizedBox(width: 8),
                    Expanded(
                      child: Text(
                        title,
                        style: const TextStyle(
                          fontSize: 14,
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 4),
                Text(
                  date,
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey[600],
                  ),
                ),
              ],
            );
          } else {
            // 正常宽度使用水平布局
            return Row(
              children: [
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                  decoration: BoxDecoration(
                    color: statusColor.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(
                    status,
                    style: TextStyle(
                      fontSize: 12,
                      color: statusColor,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Text(
                    title,
                    style: const TextStyle(
                      fontSize: 14,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                const SizedBox(width: 8),
                Text(
                  date,
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey[600],
                  ),
                ),
              ],
            );
          }
        },
      ),
    );
  }
  
  // 构建信息部分
  Widget _buildInfoSection() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(4),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '项目信息',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 16),
          LayoutBuilder(
            builder: (context, constraints) {
              if (constraints.maxWidth < 800) {
                // 小屏幕时使用垂直布局
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildInfoItem(
                      title: '项目名称',
                      content: 'Flutter Miaoyi UI框架',
                    ),
                    _buildInfoItem(
                      title: '当前版本',
                      content: 'v1.0.0',
                    ),
                    _buildInfoItem(
                      title: '项目负责人',
                      content: '张三',
                    ),
                    _buildInfoItem(
                      title: '开始日期',
                      content: '2024-03-01',
                    ),
                    _buildInfoItem(
                      title: '项目描述',
                      content: 'Flutter Miaoyi 框架，在 Flutter 中提供了一套完整的后台管理系统UI组件和布局。',
                    ),
                  ],
                );
              } else {
                // 大屏幕时使用水平布局
                return Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          child: _buildInfoItem(
                            title: '项目名称',
                            content: 'Flutter Miaoyi UI框架',
                          ),
                        ),
                        Expanded(
                          child: _buildInfoItem(
                            title: '当前版本',
                            content: 'v1.0.0',
                          ),
                        ),
                        Expanded(
                          child: _buildInfoItem(
                            title: '项目负责人',
                            content: '张三',
                          ),
                        ),
                        Expanded(
                          child: _buildInfoItem(
                            title: '开始日期',
                            content: '2024-03-01',
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 16),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          child: _buildInfoItem(
                            title: '项目描述',
                            content: 'Flutter Miaoyi 框架，是基于 Flutter 提供了一套完整的后台管理系统UI组件和布局。',
                          ),
                        ),
                      ],
                    ),
                  ],
                );
              }
            },
          ),
        ],
      ),
    );
  }
  
  // 构建信息项
  Widget _buildInfoItem({
    required String title,
    required String content,
  }) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(
              fontSize: 12,
              color: Colors.grey[600],
            ),
          ),
          const SizedBox(height: 4),
          Text(
            content,
            style: const TextStyle(
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }
} 